<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>animation</title>
        <style>
            @keyframes loadings {
                0%{transform:rotate(0deg)}
                50%{transform:rotate(180deg)}
                100%{transform:rotate(360deg)}
            }
            @-webkit-keyframes loadings{
                0%{-webkit-transform:rotate(0deg)}
                50%{-webkit-transform:rotate(180deg)}
                100%{-webkit-transform:rotate(360deg)}
            }
            div .loading{
                display:inline-block;
                height:15px;
                width:15px;
                border-radius:100%;
                margin:6px;
                border:2px solid #666;
                border-bottom-color:transparent;
                animation: loadings 1s linear infinite;
            }
        </style>
    </head>
    <body>
        <div id="div1"><span class="loading"></span>加载中...</div>
    </body>
</html>